:root {
  --fondo: #e88dff;
  --titulos: #401eff;
  --textoGeneral: rgb(240, 10, 144);
  --colorPrincipal: #050100;
  --colorSecundario: #fefefe;
  --tamanoTexto: 18px;
}

body {
  background-color: var(--fondo);
  transition: all 0.3s ease;
  color: var(--textoGeneral);
  font-size: var(--tamanoTexto);
}

h1, h2, h3 {
  color: var(--titulos);
  transition: all 0.3s ease;
}

.descripcion-1 {
  transition: all 0.3s ease;
}

.descripcion-2 {
  --textoGeneral: #00110b;
  color: var(--textoGeneral);
  transition: all 0.3s ease;
}

.descripcion-3 {
  --textoExtra: rgb(38, 2, 80);
  color: var(--textoExtra);
  transition: all 0.3s ease;
}

.contenedor-bloque {
  background-color: var(--colorSecundario);
  color: var(--colorPrincipal);
  border-radius: 10px;
  padding: 20px;
  max-width: 600px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  font-size: var(--tamanoTexto);
  transition: all 0.3s ease;
}

.contenedor-bloque h3 {
  border-bottom: 2px dashed var(--colorPrincipal);
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

.grupo-botones button {
  margin-right: 10px;
  background-color: var(--colorPrincipal);
  color: var(--colorSecundario);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.grupo-botones button:hover {
  background-color: #1983e6;
}

.zona-acciones {
  margin-top: 20px;
  text-align: center;
}

.zona-acciones button {
  padding: 10px;
  margin: 5px;
  border: 2px solid var(--colorSecundario);
  background-color: transparent;
  color: var(--colorSecundario);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.zona-acciones button:hover {
  background-color: var(--colorSecundario);
  color: var(--colorPrincipal);
}

@media screen and (min-width: 450px) {
  :root {
    --colorPrincipal: #4da6ff;
    --tamanoTexto: 26px;
  }
}